<template>
  <el-upload
      limit="1"
      list-type="picture-card"
      :on-change="handleChange"
      :on-preview = "handlePictureCardPreview"
      :on-remove="removePicture"
      :show-file-list="false"
      :http-request="uploadImg">
    <img v-if="props.imgdata.url" :src="props.imgdata.url" :class="{'icon':props.imgdata.url!=''}"/>
    <el-icon v-else><Plus /></el-icon>
  </el-upload>
<!--  <el-upload-->
<!--      class="avatar-uploader"-->
<!--      action="http://localhost:1688/record/fileImg"-->
<!--      :on-success="handleAvatarSuccess"-->
<!--      name="file"-->
<!--      :show-file-list="false"-->
<!--  >-->
<!--    <img v-if="props.imgdata.url" :src="props.imgdata.url" class="avatar" />-->
<!--    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>-->
<!--  </el-upload>-->
</template>

<script lang="ts" setup>
import axios from 'axios'
import {onBeforeMount, reactive, ref,inject} from "vue";
import {useStore} from "vuex";
import {UploadUserFile} from "element-plus";
import {useRouter} from "vue-router";

const formData = new FormData();

const userInfo = ref({
  userIcon:'',
  userNo:'',
  userName:'',
  userPhone:''
});

const props =defineProps({
  imgdata:{
    type:Object
  }
});//文件上传的回显图片

const store = useStore();
onBeforeMount(()=>{
  if (store.state.userData !=''){
    userInfo.value = JSON.parse(JSON.stringify(store.state.userData))
    props.imgdata.url = userInfo.value.userIcon;
  }
})
//有上传的头像，就把imgaeUrl默认显示的头像删除
const handleChange = (file)=>{
  props.imgdata.url = ''
}
//删除就把原头像再显示回来
const removePicture = (file)=>{
  props.imgdata.url = userInfo.value.userIcon;
}

const router = useRouter()
//直接上传，配合:http-request属性
const uploadImg = (option)=>{
  formData.append("userNo",userInfo.value.userNo)
  formData.append("file",option.file)
  axios.post("http://localhost:1688/record/fileImg",formData).then((res)=>{
    props.imgdata.url = res.data
   // router.replace("/")
  })
}

// import { ref } from "vue";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
// const props =defineProps({
//   imgdata:{
//     type:Object
//   }
// })
import type { UploadProps } from "element-plus";

// const handleAvatarSuccess: UploadProps["onSuccess"] = (
//     response,
//     uploadFile
// ) => {
//   props.imgdata.url = URL.createObjectURL(uploadFile.raw!);
// };

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.icon{
  width:148px;height: 148px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  border:1px dashed green;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
/*.avatar-uploader .el-upload {*/
/*  border: 1px dashed var(--el-border-color);*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*  transition: var(--el-transition-duration-fast);*/
/*}*/

/*.avatar-uploader .el-upload:hover {*/
/*  border-color: var(--el-color-primary);*/
/*}*/

/*.el-icon.avatar-uploader-icon {*/
/*  font-size: 28px;*/
/*  color: #8c939d;*/
/*  width: 178px;*/
/*  height: 178px;*/
/*  text-align: center;*/
/*}*/
</style>